<!-- BEGIN:main -->

<!--script tải danh sách cán bộ suggest-->
<script type="text/javascript" src="../blugin/magicsuggest/jquery-1.8.3-min.js"></script>
<link rel="stylesheet" href="../blugin/magicsuggest/magicsuggest-1.3.1.css">          
<script type="text/javascript" src="../blugin/magicsuggest/magicsuggest-1.3.1.js"></script>

<!--tránh sung đột javascript-->
<script type="text/javascript">jQuery.noConflict();</script>

<script>

    $(function() {
        // cấu hình popup chọn ngày của Ngày tạo, Ngày xuất bản và Ngày ngừng xuất bản
        $("#txtCreatedDate").datepicker({});
        $("#txtPublishUp").datepicker({});
        $("#txtPublishDown").datepicker({});
    });


    // mảng danh sách key trong database (dùng để so sánh key mới và key cũ đã tồn tại)
    var jsonKeyList = [];


    // mảng key người dùng đã chọn
    var arrSelectedKeys = [];

    var txtKeyList;

    // giá trị và tên của key mới được thêm vào database
    var newKeyName;
    var newKeyID;





    jQuery(document).ready(function($) {


        // remove a property
        $('.removeKey').live('click', function() {

            // div contain key, name and value of property
            var div = $(this).parent();


            // gỡ bỏ từ danh sách hiển thị
            div.remove();

            // key and value
            var keyValue = div.attr('id');

            // position of property to remove
            var index = arrSelectedKeys.indexOf(keyValue);

            // if exitst property in array then remove
            if (index > -1) {
                arrSelectedKeys.splice(index, 1);
            }
        });




        // sự kiện nhấn nút thêm key
        $("#btAddKey").click(function() {
            // ẩn nút thêm
            $('#btAddKey').hide();

            // thêm key vào database
            addKeyToDatabase(newKeyName);

            // thêm key vào danh sách hiển thị trên giao diện
            addKeyToList(newKeyID, newKeyName);
        });



        // sự kiện nhấn xóa ảnh đại diện
        $('#btDeleteImage').click(function() {
            $('#txtImage').val('');
        });



        $('#cbPublishUp').click(function() {
            if ($("#cbPublishUp").is(':checked')) {
                $("#txtPublishUp").removeAttr("disabled");
                $("#slPublishUpHour").removeAttr("disabled");
                $("#slPublishUpMinute").removeAttr("disabled");
            } else {
                $("#txtPublishUp").attr("disabled", "disabled");
                $("#slPublishUpHour").attr("disabled", "disabled");
                $("#slPublishUpMinute").attr("disabled", "disabled");
                $("#txtPublishUp").val('');
            }
        });


        $('#cbPublishDown').click(function() {
            if ($("#cbPublishDown").is(':checked')) {
                $("#txtPublishDown").removeAttr("disabled");
                $("#slPublishDownHour").removeAttr("disabled");
                $("#slPublishDownMinute").removeAttr("disabled");
            } else {
                $("#txtPublishDown").attr("disabled", "disabled");
                $("#txtPublishDown").val('');
                $("#slPublishDownHour").attr("disabled", "disabled");
                $("#slPublishDownMinute").attr("disabled", "disabled");
            }
        });


        // sự kiển click nút mở rộng hoặc thu hẹp
        $(".btExpandCollapse").click(function() {

            var text = $(this).text();

            if (text == "Mở rộng") {

                $('#divExpand').show();
                $(".btExpandCollapse").text("Thu hẹp");
                $("#imgExpand").attr('src', './template/default/images/collapse.png');

            }
            else {

                $('#divExpand').hide();
                $(".btExpandCollapse").html("Mở rộng");
                $("#imgExpand").attr('src', './template/default/images/expand.png');

            }
        });


        getKeyList();

        fillSelectBox_KeyList();



        // hàm tải danh sách key và gán vào textbox key
        function fillSelectBox_KeyList() {
            txtKeyList = $('#txtKey').magicSuggest({
                data: './components/com_article/loadKeyList.php',
                sortOrder: 'id',
                resultAsString: true,
                maxSelection: 1,
                width: 300,
                maxSelectionRenderer: function() {
                    return 'chỉ được chọn 1 người trong danh sách';
                }
            });
        }



        // hàm tải danh sách keyword và truyền vào mảng giá trị
        function getKeyList() {
            var dataString = 'hdAction=getKeyList';
            $.ajax({
                url: './components/com_article/index.php',
                type: "POST",
                data: dataString,
                cache: false,
                async: false,
                success: function(data) {
                    jsonKeyList = JSON.parse(data);
                }
            });
        }



        // hàm thêm key vào database
        function addKeyToDatabase(key) {

            var dataString = 'hdAction=addKey';
            dataString += '&key=' + key;
            $.ajax({
                url: './components/com_article/index.php',
                type: "POST",
                data: dataString,
                cache: false,
                async: false,
                success: function(data) {

                    getKeyList();

                    // new key id
                    newKeyID = data.trim();
                }
            });

        }




        // sau khi tải danh sách key xong thì ẩn cái form nhập key
        jQuery('#divExpand').hide();


        // sự kiện chọn trên key selection
        $(txtKeyList).on('selectionchange', function(event, combo, selection) {

            var name;
            var id;

            for (var i = 0; i < selection.length; i++) {
                name = selection[i].name;
                id = selection[i].id;
            }

            var keyExist = false;

            if (id != '') {
                for (i in jsonKeyList) {
                    if (jsonKeyList[i].id == id.trim()) {
                        keyExist = true;
                        break;
                    }
                }
            }

            // nếu key không tồn tại thì hiển nút thêm mới và giá giá trị keyname mơi
            if (!keyExist) {
                // hiển thị nút thêm mới
                jQuery('#btAddKey').show();

                newKeyName = name.trim();

            } else {
                jQuery('#btAddKey').hide();
                addKeyToList(id, name);
            }
        });


        // bắt sự kiện nút back, khi đó thì ẩn nút thêm mới key
        $(txtKeyList).on('keydown', function(e, m, v) {
            if (v.keyCode == 8) {
                jQuery('#btAddKey').hide();
            }
        });

    });







    // hàm thêm key vào mảng và khung hiển thị danh sách
    function addKeyToList(id, name) {

        if ($.inArray(id, arrSelectedKeys) == -1) {

            arrSelectedKeys.push(id);

            var key = $('<div class="d_border_radius5 d_property" id="' + id + '">' + name + '<div style="margin-left:3px; float:right; cursor: pointer;" class="removeKey"><img src="./template/default/images/delete.png"/></div></div>');

            key.appendTo('#divKeyList');
        }
        txtKeyList.clear();
    }



    function submitForm(ac)
    {
        var title = $('#txtTitle');
        var alias = $('#txtAlias');
        var categoryID = $('#slCategoryID');

        if (alias.val() == '') {
            alias.val(title.val());
        }

        var arrayInput = new Array(title, categoryID);

        var hasError = validateEmptyValue(arrayInput);



        // kiểm tra giá trị hợp lệ
        if (hasError) {
            alert("Vui lòng điền đầy đủ thông tin");
        } else {

            // nếu có check ngày xuất bản thì không được để trống textbox ngày xuất bản
            if ($('input[name=cbPublishUp]').is(':checked')) {
                if ($('#txtPublishUp').val() == '') {
                    setOffInput($('#txtPublishUp'));
                    alert('Vui lòng chọn ngày xuất bản');
                    return;
                }
            }



            // nếu có check ngày ngừng xuất bản thì không được để trống textbox ngày ngừng xuất bản
            if ($('input[name=cbPublishDown]').is(':checked')) {
                if ($('#txtPublishDown').val() == '') {
                    setOffInput($('#txtPublishDown'));
                    alert('Vui lòng chọn ngừng ngày xuất bản');
                    return;
                }
            }



            // nếu có check cả 2 ngày publish up và publish down
            if ($('input[name=cbPublishUp]').is(':checked') && $('input[name=cbPublishDown]').is(':checked')) {

                var txtPublishUp = $('#txtPublishUp');
                var slPublishUpHour = $('#slPublishUpHour');
                var slPublishUpMinute = $('#slPublishUpMinute');

                var txtPublishDown = $('#txtPublishDown');
                var slPublishDownHour = $('#slPublishDownHour');
                var slPublishDownMinute = $('#slPublishDownMinute');


                var ok = compareStartDateAndEndDate(txtPublishUp, slPublishUpHour, slPublishUpMinute, txtPublishDown, slPublishDownHour, slPublishDownMinute, 'Ngày xuất bản phải nhỏ hơn ngày ngừng xuất bản');
                // nếu ngày không hợp lệ thì thoát khỏi hàm và không submit
                if (!ok) {
                    return;
                }
            }

            var form = document.phpForm;
            form.hdAction.value = ac;
            form.hdKeyList.value = arrSelectedKeys.toString();
            form.submit();
        }
    }






    // hàm mở popup duyệt file trên máy chủ
    function BrowseServer() {
        var finder = new CKFinder();
        finder.BasePath = '../blugin/ckeditor3.6.4/ckfinder/';
        finder.startupPath = "Images:/images/";
        finder.SelectFunction = SetFileField;
        finder.Popup();
    }


    // hàm gán giá trị chọn file trên máy chủ vào trường image
    function SetFileField(fileUrl) {
        document.getElementById('txtImage').value = fileUrl;
        document.getElementById('hdImage').value = fileUrl;
    }


</script>






<div id="toolbar-box">
    <div class="d_divide5"></div>


    <div class="toolbar" id="toolbar">
        <table class="toolbar">
            <tr>
                <td class="button" id="toolbar-save">
                    <a href="javascript:void()" onclick="submitForm('addAndExit')" class="toolbar">
                        <span class="icon-32-save" title="Lưu và Đóng"></span>
                        Lưu & Đóng
                    </a>
                </td>

                <td class="button" id="toolbar-apply">
                    <a href="javascript:void()" onclick="submitForm('add')" class="toolbar">
                        <span class="icon-32-apply" title="Áp dụng"></span>
                        Lưu
                    </a>
                </td>

                <td class="button" id="toolbar-cancel">
                    <a href=".?com=com_article&view=article&task=view" class="toolbar">
                        <span class="icon-32-cancel" title="Hủy"></span>
                        Hủy
                    </a>
                </td>												
            </tr>
        </table>
    </div>
    <div class="header icon_48_article_add">
        Bài viết: <small><small>[ Thêm mới ]</small></small>
    </div>

    <div class="d_divide5"></div>
</div>



<div class="d_divide10"></div>
<div class="d_clear"></div>

<div id="element-box">


    <form method="post" name="phpForm">

        <input type="hidden" name="hdKeyList" value="" />        
        <input type="hidden" name="hdAction" value=""/>


        <table  class="adminform">
            <tr>
                <td>
                    <label for="txtTitle" class="d_label">Tiêu đề bài viết: <b style="color: red;font-size: 14px;">*</b></label>
                </td>
                <td>
                    <input type="text" name="txtTitle" class="d_text_input" id="txtTitle" style="width: 350px;" maxlength="255" value="" title="Tiêu đề" />
                </td>
                <td> 
                    <label for="txtAlias" class="d_label">Alias (Định danh)</label>
                </td>
                <td>
                    <input type="text" class="d_text_input" name="txtAlias" id="txtAlias" style="width: 350px;" maxlength="255" value="" title="alias" />                                
                </td>
            </tr>

            <tr>
                <td>
                    <label for="slCategoryID" class="d_label">Nhóm tin: <b style="color: red;font-size: 14px;">*</b></label>
                </td>

                <td>
                    <select size="1" style="width: 350px;" class="d_text_input" name="slCategoryID" id="slCategoryID">
                        <option value="">-- Chọn nhóm tin --</option>
                        <!-- BEGIN:category_list -->
                        <OPTION {SELECTED_CATEGORY} value={CATEGORY_ID}>{CATEGORY_TITLE}</OPTION>                                            
                        <!-- END:category_list -->
                    </select>
                </td>

                <td>
                    <label for="datepicker" class="d_label">Ngày tạo</label>
                </td>
                <td>                                                
                    <input class="d_text_input" readonly="true" value="{TODAY}"  id="txtCreatedDate" style="width: 110px;" name="txtCreatedDate" />                                
                </td>
            </tr>

            <tr>
                <td>
                    <label for="btBrowseImage" class="d_label">Ảnh đại diện:</label>
                </td>
                <td>

                    <div style="float: left;">
                        <input class="d_text_input" type="text" id="txtImage" name="txtImage" value="" disabled="disabled" size="100" style="width: 250px" />
                        <input type="hidden" id="hdImage" name="hdImage" value="/{UPLOAD_FOLDER}/images/no_image.jpg" />
                    </div>

                    <input type="button" class="d_button" value="Chọn" onclick="javascript:BrowseServer()"/>
                    <input type="button" class="d_button" value="Xóa"  name="btDeleteImage" id="btDeleteImage" />

                </td>
                <td>
                    <label class="d_label">Hiển thị ảnh đại diện</label>
                </td>
                <td>
                    <input type="radio" name="rdoImageStatus" id="rdoImageStatus0" value="0"  />
                    <label>Không</label>
                    <input type="radio" name="rdoImageStatus" id="rdoImageStatus1" value="1" checked="checked"  />
                    <label>Có</label>
                </td>
            </tr>       

            <tr>
                <td>
                    <label class="d_label">Bật/Tắt bài viết:</label>
                </td>
                <td>
                    <input type="radio" name="rdoStatus" id="rdoStatus0" value="0"  />
                    <label>Tắt</label>
                    <input type="radio" name="rdoStatus" id="rdoStatus1" value="1" checked="checked"  />
                    <label>Bật</label>
                </td>
                <td>
                    <label class="d_label">Là bài viết nổi bật</label>
                </td>
                <td>
                    <input type="radio" name="rdoHighLight" id="rdoHighLight0" value="0" checked="checked" />
                    <label>Không</label>
                    <input type="radio" name="rdoHighLight" id="rdoHighLight1" value="1" />
                    <label>Có</label>
                </td>
            </tr> 

            <tr>
                <td>
                    <label class="d_label">Ngày xuất bản</label>
                    <input type="checkbox" id="cbPublishUp" name="cbPublishUp" />
                </td>

                <td>
                    <input disabled="true" readonly="true" value="" name="txtPublishUp" id="txtPublishUp" style="width: 100px;float: left" class="d_text_input" />                                

                    <div class="d_label" style="min-width: 30px;width: auto !important;width: 30px;">Giờ: </div>

                    <select disabled="disabled" style="float: left" class="d_text_input" name="slPublishUpHour" id="slPublishUpHour">
                        <!-- BEGIN:publish_up_hour -->
                        <option value="{VALUE}">{TITLE}</option>
                        <!-- END:publish_up_hour -->                                                                            
                    </select>


                    <div class="d_label" style="min-width: 30px;width: auto !important;width: 30px;">Phút: </div>
                    <select disabled="disabled" style="float: left" class="d_text_input" name="slPublishUpMinute" id="slPublishUpMinute">
                        <!-- BEGIN:publish_up_minute -->
                        <option value="{VALUE}">{TITLE}</option>
                        <!-- END:publish_up_minute -->                                                                            
                    </select> 


                </td>



                <td>
                    <label class="d_label">Ngày ngừng xuất bản</label>
                    <input type="checkbox" id="cbPublishDown" name="cbPublishDown" />
                </td>

                <td>
                    <input disabled="true" readonly="true" value="" name="txtPublishDown" id="txtPublishDown" style="width: 100px;float: left" class="d_text_input" />                                

                    <div class="d_label" style="min-width: 30px;width: auto !important;width: 30px;">Giờ: </div>

                    <select disabled="disabled" style="float: left" class="d_text_input" name="slPublishDownHour" id="slPublishDownHour">
                        <!-- BEGIN:publish_down_hour -->
                        <option value="{VALUE}">{TITLE}</option>
                        <!-- END:publish_down_hour -->                                                                            
                    </select>

                    <div class="d_label" style="min-width: 30px;width: auto !important;width: 30px;">Phút: </div>

                    <select disabled="disabled" style="float: left" class="d_text_input" name="slPublishDownMinute" id="slPublishDownMinute">
                        <!-- BEGIN:publish_down_minute -->
                        <option value="{VALUE}">{TITLE}</option>
                        <!-- END:publish_down_minute -->                                                                            
                    </select> 
                </td>
            </tr> 


            <tr>

                <td colspan="4">     

                    <div  style="text-align: center;height: 30px; ">
                        <div class="d_border_radius5 d_button" style="width: 120px; margin: 0 auto; position: relative;text-align: center">

                            <a class="btExpandCollapse">Mở rộng</a>

                            <img id="imgExpand" src="./template/default/images/expand.png" style="position: absolute; top: 4px; right: 4px" />
                        </div>
                    </div>



                    <div id="divExpand" style="width: 100%;" >

                        <fieldset>

                            <legend>Từ khóa của bài viết</legend>

                            <div>
                                <input placeholder="đánh chọn từ khóa cho bài viết" value="" name="txtKey" id="txtKey" style="width: 200px; float: left; margin: 0 10px 0 0" class="d_text_input"  />                                

                                <input type="button" name="btAddKey" id="btAddKey" class="d_button" value="Thêm mới" style="display: none" />                                
                            </div>

                            <div class="d_clear"></div>
                            <div class="d_divide10"></div>

                            <fieldset>
                                <legend>Danh sách</legend>
                                <div style="height: 100px" id="divKeyList">

                                </div>
                            </fieldset>
                        </fieldset>
                    </div>

                </td>
            </tr>


        </table>


        <table class="adminform">
            <tr>
                <td style="text-align: center">


                    <div class="d_divide10"></div>


                    <label  style="font-weight:bold">Nội dung mô tả:</label>    


                    <div class="d_divide10"></div>


                    <textarea name="txtDescription" id="txtDescription"></textarea>

                    <script language="javascript" type="text/javascript">
                        CKEDITOR.replace('txtDescription',
                                {
                                    filebrowserBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html',
                                    filebrowserImageBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Images',
                                    filebrowserFlashBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Flash',
                                    height: 170,
                                    toolbarStartupExpanded: false
                                });
                    </script>

                    <div class="d_divide10"></div>



                    <label style="font-weight:bold ">Nội dung chi tiết: </label>     

                    <div class="d_divide10"></div>


                    <textarea name="txtContent" id="txtContent"></textarea>

                    <script language="javascript" type="text/javascript">
                        CKEDITOR.replace('txtContent',
                                {
                                    filebrowserBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html',
                                    filebrowserImageBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Images',
                                    filebrowserFlashBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Flash',
                                    height: 450,
                                    toolbarStartupExpanded: true
                                });
                    </script>

                </td>
            </tr>
        </table>

    </form>

</div>
<noscript>
!Cảnh báo! Javascript phải được bật để chạy được các chức năng trong phần Quản trị		</noscript>


<!-- END:main -->	